<template>
  <el-main>
    <el-form :model="searchModel" ref="searchForm" label-width="80px" :inline="true" size="small">
                <el-form-item>
                    <el-input v-model="searchModel.supname" placeholder="请输入供应商名称"/>
                </el-form-item>
                <el-form-item>
                    <el-input v-model="searchModel.username" placeholder="请输入采购人"/>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" icon="el-icon-search" @click="search(pageNo, pageSize)">查询</el-button>
                    <el-button icon="el-icon-refresh-right" @click="resetValue()">重置</el-button>
                    <el-button type="success" icon="el-icon-plus" @click="openAddWindow()" v-if="hasPermission('sys:shop:add')">新增</el-button>
                </el-form-item>
    </el-form>
    <el-table :data="shopList"  stripe style="width: 100%; margin-bottom: 10px">
                <el-table-column prop="id" label="编号" align="center" width="50px"></el-table-column>
                <el-table-column prop="name" label="采购物品" align="center" width="260px"></el-table-column>
                <el-table-column prop="supname" label="供应商名称" align="center" width="150px"></el-table-column>
                <el-table-column prop="username" label="采购人" align="center"></el-table-column>
                <el-table-column prop="num" label="数量" align="center"></el-table-column>
                <el-table-column prop="status" label="状态" align="center" width="80px">
                    <template slot-scope="scope">
                        <el-tag type="warning" v-if="scope.row.status == '0'" size="normal">待审核</el-tag>
                        <el-tag type="success" v-else-if="scope.row.status == '1'" size="normal">已通过</el-tag>
                        <el-tag type="danger" v-else-if="scope.row.status == '2'" size="normal">未通过</el-tag>
                    </template>
                </el-table-column>
                <el-table-column prop="shopTime" label="最后操作时间" align="center"></el-table-column>
                <el-table-column  label="操作" align="center" width="300px">
                    <template slot-scope="scope">
                        <el-tooltip class="item" effect="dark" content="查看备注" placement="top">
                            <el-button icon="el-icon-search" circle @click="handleDetail(scope.row)"></el-button>
                        </el-tooltip>
                        <el-button icon="el-icon-edit" type="text" size="small" @click="Audit(scope.row)" v-if="hasPermission('sys:shop:audit')">审核</el-button>
                        <el-button icon="el-icon-edit" type="text" size="small" @click="handleEdit(scope.row)" v-if="hasPermission('sys:shop:edit')">编辑</el-button>
                        <el-button icon="el-icon-delete" type="text" size="small" @click="handleDelete(scope.row)" v-if="hasPermission('sys:shop:delete')">删除</el-button>
                    </template>
                </el-table-column>
    </el-table>
    <el-pagination background
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="pageNo"
            :page-sizes="[10, 20, 30, 40, 50]"
            :page-size="10"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total" align="center">
    </el-pagination>
    <!-- 添加和修改窗口 -->
    <system-dialog
        :title="shopDialog.title"
        :visible="shopDialog.visible"
        :width="shopDialog.width"
        :height="shopDialog.height"
        @onClose="onClose"
        @onConfirm="onConfirm">
        <div slot="content">
        <el-form :inline="true" :model="shop" ref="shopForm" :rules="rules" label-width="80px">
            <br>
        <el-form-item label="采购物品" prop="name">
            <el-input v-model="shop.name" style="width: 300px;"></el-input>
        </el-form-item>
        <br>
        <el-form-item label="供应商" prop="supname">
        <el-select 
          v-model="shop.supname" 
          placeholder="请选择供应商"
          clearable
        >
          <el-option
            v-for="item in supOptions"
            :key="item.id"
            :label="item.name"
            :value="item.name"
          />
        </el-select>
      </el-form-item>
      <br>
      <el-form-item label="数量" prop="num">
            <el-input-number v-model="shop.num" @change="handleChange" :min="1" :max="100" label="数量"></el-input-number>
        </el-form-item>
        </el-form>
        </div>
    </system-dialog>
    <system-dialog
        :title="auditDialog.title"
        :visible="auditDialog.visible"
        :width="auditDialog.width"
        :height="auditDialog.height"
        @onClose="auditOnClose"
        @onConfirm="auditOnConfirm">
        <div slot="content">
            <el-form :inline="true" :model="shop" ref="auditForm" :rules="rule" label-width="80px">
        <el-row>
                <el-col :span="24">
                <el-form-item prop="status" label="状态">
                <el-radio-group v-model="shop.status">
                <el-radio :label="1">通过</el-radio>
                <el-radio :label="2">拒绝</el-radio>
                </el-radio-group>
                </el-form-item>
                </el-col>
            </el-row>
            <el-form-item label="备注" prop="content">
                    <el-input
                        type="textarea"
                        :rows="6"
                        placeholder="请输入内容"
                        v-model="shop.remarks"
                        style="width: 500px;">
                    </el-input>
            </el-form-item>
            </el-form>
        </div>
        </system-dialog>

        <system-dialog
        :title="remarksDialog.title"
        :visible="remarksDialog.visible"
        :width="remarksDialog.width"
        :height="remarksDialog.height"
        @onClose="remarksOnClose"
        @onConfirm="remarksOnConfirm">
        <div slot="content">
            <el-form :inline="true" :model="shop" ref="noticeForm" :rules="rules" label-width="80px">
                <el-form-item label="备注信息" prop="remarks">
                    <el-input
                        type="textarea"
                        :rows="15"
                        placeholder="请输入内容"
                        v-model="shop.remarks"
                        style="width: 600px;height: 300px;">
                    </el-input>
                </el-form-item>
            </el-form>
        </div>
        </system-dialog>
  </el-main>
</template>

<script>
import{getSupListShop} from '@/api/sup';
import{getShopList,AddShopList,updateShop,deleteShop,auditShop} from '@/api/shop';
//导入对话框组件
import SystemDialog from '@/components/system/SystemDialog.vue';
export default {
    name:"shopList",
    //注册组件
        components:{
            SystemDialog
        },
    data(){
        return {
            searchModel:{
                    supname:'',
                    username:'',
                    pageNo: 1,
                    pageSize: 10,
                },
                shopList:[],
                shop:{
                    id:'',
                    name:'',
                    supname:'',
                    username:'',
                    num:1,
                    status:'',
                    shopTime:'',
                    remarks:'',
                    payStatus:'',
                    payUser:'',
                    payTime:'',
                },
                pageNo: 1, //当前页码
                pageSize: 10, //每页显示数量
                total: 0, //总数量
                supOptions:[],
                shopDialog: {
                    title: "",
                    visible: false, //是否显示
                    width: 550,
                    height: 250,
                },
                rules:{
                name: [{ required: true, trigger: "blur", message: "请输入名称"}],
                supname: [{ required: true, trigger: "blur", message: "请选择供应商" }],
                
            },
            rule:{
                status: [{ required: true, trigger: "change", message: "请选择审核状态" }],
            },
            auditDialog: {
                    title: "",
                    visible: false, //是否显示
                    width: 550,
                    height: 250,
                },
            //内容窗口属性
            remarksDialog:{
                title: "",
                visible: false, //是否显示
                width: 750,
                height: 350,
            },
        }
    },
    methods:{
        //查询
        async search(pageNo=1,pageSize=10){
                this.searchModel.pageNo = pageNo;//当前页码
                this.searchModel.pageSize = pageSize;//每页显示数量
                let res = await getShopList(this.searchModel);
                //执行成功
                if (res.success) {
                //列表
                this.shopList = res.data.records;
                //总数量
                this.total = res.data.total;
                }
        },
        resetValue(){
                this.searchModel.supname = '';
                this.searchModel.username = '';
                this.search();
        },
        openAddWindow(){
            //清空表单数据
                this.$resetForm("shopForm", this.shop);
                //设置窗口标题
                this.shopDialog.title = "新建采购单";
                //显示添加部门窗口
                this.shopDialog.visible = true;
        },
        handleEdit(row){
            //数据回显
                this.$objCopy(row, this.shop);
                //设置窗口标题
                this.shopDialog.title = "编辑";
                //显示编辑部门窗口
                this.shopDialog.visible = true;
        },
        async handleDelete(row){
            let confirm =await this.$myconfirm("确定要删除该数据吗?");
                if(confirm){
                    let res = await deleteShop({id:row.id})
                    if(res.success){
                        this.$message.success(res.message);
                        this.search();
                    }else{
                        this.$message.error(res.message);
                    }
            }
        },
        /**
            * 当每页数量发生变化时触发该事件
            */
            handleSizeChange(size) {
                this.pageSize = size; //将每页显示的数量交给成员变量
                this.search(this.pageNo, size);
            },
            /**
            * 当页码发生变化时触发该事件
            */
            handleCurrentChange(page) {
                this.pageNo = page;
                //调用查询方法
                this.search(page, this.pageSize);
            },
             // 关闭窗口
            onClose(){
                this.shopDialog.visible = false;
            },
            async fetchSup() {
                let res = await getSupListShop();
                //执行成功
                if (res.success) {
                //列表
                this.supOptions = res.data;
                }
            },
            onConfirm(){
                //验证表单
            this.$refs.shopForm.validate(async (valid) => {
                let res = null;
                if (valid) {
                    //发送发布请求
                    if(this.shop.id===''){
                        //添加
                        res = await AddShopList(this.shop);
                    }else{
                        //修改
                        this.shop.status=0;
                        res = await updateShop(this.shop);
                        
                    }
                    if(res.success){
                        this.$message.success(res.message);
                        this.search();
                        //关闭窗口  
                        this.shopDialog.visible = false;
                    }else{
                        this.$message.error(res.message);
                    }
                    //关闭窗口
                    this.shopDialog.visible = false;
                }
            });
            },
            handleChange(value){
                this.num=value
            },
            async Audit(row){
                //数据回显
                this.$objCopy(row, this.shop);
                //设置窗口标题
                this.auditDialog.title = "审核";
                //显示窗口
                this.auditDialog.visible = true;
            },
            auditOnClose(){
                this.auditDialog.visible = false;
            },
            auditOnConfirm(){
                this.$refs.auditForm.validate(async (valid) => {
                    let res = null;
                    if (valid) {
                        res = await auditShop(this.shop);
                        if(res.success){
                        this.$message.success(res.message);
                        this.search();
                        //关闭窗口  
                        this.auditDialog.visible = false;
                    }else{
                        this.$message.error(res.message);
                    }
                    //关闭窗口
                    this.auditDialog.visible = false;
                    }
                });
            },
        handleDetail(row){
            //数据回显
                this.$objCopy(row, this.shop);
                //设置窗口标题
                this.remarksDialog.title = "备注";
                //显示编辑部门窗口
                this.remarksDialog.visible = true;
        },
        remarksOnClose(){
            this.remarksDialog.visible = false;
        },
        remarksOnConfirm(){
            this.remarksDialog.visible = false;
        }
    },
    //初始化时调用
    created() {
        this.search()
        this.fetchSup() 
    },
}
</script>

<style>

</style>